<template>
  <div class="announcement-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
        @onChangeDataPicker="onChangeDataPicker"
        @onAdd="onAdd"
      >
        <template slot="allDeleteBtn">
          <a-popconfirm
            :title="`是否确认删除角色?`"
            v-if="selectedRowKeys.length > 0"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDeleteAll"
          >
            <a-button icon="delete" type="danger">批量删除</a-button>
          </a-popconfirm>
        </template>
      </c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        showPagination
        rowSelection
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
        @onSelectChange="onSelectChange"
      >
        <template slot="handle" slot-scope="row">
          <a @click="onEdit(row.tableRow)"><a-icon type="edit" /> 编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDel([row.tableRow.id])"
            v-if="row.tableRow.id >= 10"
          >
            <p slot="title">
              是否确认删除该公告？
            </p>
            <a type="link"><a-icon type="delete" /> 删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="onShowHiddenOperation(row.tableRow)"><a-icon type="eye-invisible" /> 隐藏</a>
        </template>
      </c-table>
      <!-- 新增/编辑弹窗 -->
      <a-modal
        width="30%"
        title="编辑公告"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="onEditModelOk"
        @cancel="onEditModelCancel"
        :destroyOnClose="true"
        center
      >
        <c-form-model
          :datas="formEditData"
          v-model="form"
          :rules="rules"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="onEditModelCancel">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="onEditModelOk"
            >确定</a-button
          >
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";
import { addRoleTemplate } from "@/api/mallSystem/role";

export default {
  name: "Announcement",
  components: {},
  data() {
    return {
      form:{},
      visible:false,
      confirmLoading:false,
      formEditData: [
        {
          label: "公告标题",
          prop: "title",
          maxLength:100
        },
        {
          label: "公告内容",
          prop: "content",
          type:"textarea"
        }
      ],
      rules: {
        title: [
          { required: true, message: "请输入公告标题", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入公告内容", trigger: "blur" },
        ],
      },
      tableSearchForm: {
        searchKey: "",
        date: ""
      },
      tableSearchFormData: [
        {
          prop: "date",
          type: "date-picker"
        },
        {
          label: "输入公告标题关键字",
          prop: "searchKey",
          type: "search",

        }, 
        {
          prop: "addBtn",
          type: "addBtn"
        },
        {
          prop: "allDeleteBtn",
          type: "slot"
        },
       
      ],
      tableColumns: [
        {
          title: "公告标题",
          dataIndex: "",
          align: "center"
        },
        {
          title: "状态",
          dataIndex: "",
          align: "center"
        },
        {
          title: "创建时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "更新时间",
          dataIndex: "userId",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          width: 220,
          align: "center"
        }
      ],
      selectedRowKeys: [],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onChangeDataPicker(val){
      // console.log(val)
    },
    onEditModelOk(){
      this.$refs.formModels.handleValidate().then((data) => {
        const that = this;
        addRoleTemplate(data)
          .then((res) => {
            that.$message.success('操作成功');
            that.deleteIdArr = [];
            that.selectedRowKeys = [];
            that.selectedRows = [];
            that.onPageOnlod();
            that.confirmLoading = false;
            that.visible = false;
          })
          .catch(() => {
            this.confirmLoading = false;
          });
      });
    },
    onEditModelCancel(){
      this.visible = false
    },
    onDeleteAll() {
      this.deleteIdArr = [];
      this.selectedRows.map(item => {
        return this.deleteIdArr.push(item.id);
      });
      this.onDel([...new Set(this.deleteIdArr)]);
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    onSearch() {
       this.onPageOnlod();
    },
    onPageOnlod() {
      this.loading = true;
      getUserList({
        searchKey: this.tableSearchForm.searchKey,
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onShowHiddenOperation() {},
    onDel() {},
    onEdit(row) { 
      this.visible = true;
    },
    onAdd(){
      this.visible = true;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
